<template>
	<div class="lx-container">
		<el-form ref="queryParams" :model="queryParams" :inline="true" class="query-bar">
			<div class="query-row demo-form-inline">
				<div>
					<el-form-item>
					<!-- 	<el-button type="primary" @click="addTrain">创建培训</el-button> -->
					</el-form-item>
				</div>
				<div>
					<el-form-item label="状态">
						<el-select v-model="queryParams.status" filterable placeholder="请选择" @change="doQuery">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="(status,index) in statusList" v-if="index > 0" :label="status" :value="index"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="培训类型">
						<el-select v-model="queryParams.trainCategoryId" filterable placeholder="请选择" @change="doQuery">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="(type,index) in trainTypeList" :label="type.categoryName" :value="type.id"></el-option>
						</el-select>
					</el-form-item>
				</div>
			</div>
		</el-form>
		<div class="lx-table">
			<lx-table ref="myTable" :tableData="trainList" :tableCols="tableCols"  isIndex :currentPage="queryParams.pageNum"
			 :total="queryParams.total" :pageSize="queryParams.pageSize" @sizeChange="sizeChange" @currentChange="currentChange">
			</lx-table>
		</div>
		<el-dialog title="添加培训计划" :visible.sync="planFormVisible" v-if="planFormVisible" width="1008px" @close="closePlanForm" destroy-on-close
		:close-on-click-modal="false" :close-on-press-escape="false">
			<div class="lx-table">
				<lx-table ref="myPlanTable" :tableData="trainPlanList" :tableCols="planTableCols"  isIndex :isPagination="false">
				</lx-table>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closePlanForm">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import LxTable from "@/components/LxTable.vue"
	import {
		mapActions
	} from "vuex"
	export default {
		components: {
			"lx-table": LxTable
		},
		mounted() {
			let _this = this;
			//初始化窗口
			let params = _this.$store.state.pageParams; //传入到新建题目的查询参数，新建题目不修改直接返回
			if (params && JSON.stringify(params) != "{}") {
				if (params.queryParams) {
					if (params.queryParams.qpName == "TrainManager") {
						_this.queryParams = params.queryParams;
					}
					_this.setPageParams(null);
				}
			}
			this.selectTrainCategorys();
			this.getTrainList();
		},
		data() {
			return {
				selectDateRange: null,
				queryParams: {
					status: null,
					trainTitle: "",
					trainCategoryId:null,
					pageSize: 10,
					pageNum: 1,
					total: 0,
					qpName: "TrainManager"
				},
				statusList: ["", "培训未发布", "报名进行中","培训进行中","培训已结束","培训已关闭"],
				tableCols: [{
						label: '封面',
						prop: 'pictureUrl',
						align: "center",
						type: "image",
						imageStyle: "width:90px;height:68px;margin-top:10px"
					}, {
						label: '主题',
						prop: 'trainTitle'
					},
					{
						label: '培训类型',
						prop: 'trainTitle'
					},
					{
						label: '状态',
						prop: 'status',
						align: "center",
						formatter: (row) => {
							let status = row.status;
							return this.statusList[row.status];
						}
					},
					{
						label: '培训时间',
						prop: 'tranTime',
						align: "center",
						formatter: (row) => {
							if(!row.enrollStartTime){
								return "未填写"
							}
							return row.enrollStartTime +" - " + row.enrollEndTime;
						},
						width: 380,
					},
					{
						label: '操作',
						type: 'Button',
						btnList: [
							{
								type: 'text',
								formatter:(row)=>{
									return "查看培训计划("+ row.trainPlanSize +")";
								},
								disabled:(row) => {return row.trainPlanSize == 0},
								handle: (that, row) => this.getPlanList(row)
							},
							{
								type: 'text',
								label: '查看报名情况',
								disabled:(row) => {return row.status < 2},
								handle: (that, row) => this.checkTrainEnroll(row.id)
							},
							{
								type: 'text',
								label: '编辑',
								// disabled:(row) => {return row.status > 3},
								handle: (that, row) => this.edit(that, row)
							},
							{
								type: 'text',
								label: '关闭',
								disabled:(row) => {
									return true;
									//return row.status > 3
								},
								handle: (that, row) => this.close(row.id)
							}
						
						],
						width: 200,
						align: "center"
					},
				],
				trainList: [],
				trainTypeList:[],
				planFormVisible:false,
				trainPlanList:[],
				planTableCols:[{
						label: '主题',
						prop: 'trainCourseName',
						align: "center"
					},
					{
						label: '主讲人',
						prop: 'expertName',
						align: "center"
					},
					{
						label: '限制人数(人)',
						prop: 'memberCount',
						align: "center"
					},
					{
						label: '培训时间',
						prop: 'trainTime',
						align: "center",
						formatter: (row) => {
							return row.trainStartTime +" - " + row.trainEndTime;
						},
						width: 320,
					},
					{
						label: '主讲人简介',
						type: "html",
						prop: 'trainCourseIntroduction'
					},
					{
						label: '操作',
						type: 'Button',
						btnList: [
							{
								type: 'text',
								label: '查看报名情况',
								// disabled:(row) => {return row.status < 2},
								handle: (that, row) => this.checkTrainEnroll(row.trainId,row.id)
							},
						],
						align: "center"
					},
				],
			}
		},
		computed: {},
		methods: {
			async selectTrainCategorys() {
				let _this = this;
				let ret = await _this.$api.selectTrainCategoryList();
				if (ret) {
					_this.trainTypeList = ret;
				}
			},
			currentChange(val) {
				this.queryParams.pageNum = val;
				this.getTrainList();
			},
			sizeChange(val) {
				this.queryParams.pageSize = val;
				this.doQuery();
			},
			doQuery() {
				this.queryParams.pageNum = 1;
				this.getTrainList();
			},
			dateChange(date) {
				if (date && date.length > 0) {
					this.queryParams.createStartTime = date[0];
					this.queryParams.createEndTime = date[1];
				} else {
					this.queryParams.createStartTime = "";
					this.queryParams.createEndTime = "";
				}
				this.doQuery();

			},
			async getTrainList() {
				let _this = this;
				let ret = await _this.$api.selectTrainList(_this.queryParams);
				if (ret) {
					let list = ret.list;
					if(list){
						//添加上架字段
						list.map(el=>{
							el.yo = !Boolean(el.yn)
						})
					}else{
						list = []
					}
					_this.trainList = list;
					_this.queryParams.total = ret.total;
				}
			},
			addTrain() {
				this.setPageParams({
					queryParams: this.queryParams,
					trainTypeList:this.trainTypeList
				});
				this.$router.push({
					name: "CreateTrain"
				});
			},
			async getPlanList(row){
				let _this = this;
				if(row.trainPlanSize == 0 ){
					_this.$message.warning("当前没有培训计划")
					return;
				}
				let id = row.id;
				let ret = await _this.$api.selectTrainPlanByTrainId(id);
				if (ret) {
					_this.trainPlanList = ret.list;
					_this.planFormVisible = true;
				}
			},
			checkTrainEnroll(trainId,trainPlanId){
				this.setPageParams({trainId:trainId,trainPlanId:trainPlanId});
				this.$router.push({
					name: "AttendanceManager"
				});
			},
			closePlanForm(){
				this.trainPlanList = [];
				this.planFormVisible = false;
			},
			edit(t, row) {
				let params = {
					queryParams: this.queryParams,
					data: row,
					trainTypeList:this.trainTypeList
				}
				this.setPageParams(params);
				this.$router.push({
					name: "CreateTrain"
				});
			},
			async close(id){
				let _this = this;
				_this.$confirm('确定要关闭当前培训吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let params = {
						id: id,
						status: "5"
					}
					let ret = await _this.$api.updateBatchByStatus(params);
					if (ret) {
						_this.$message.success("关闭成功");
						_this.getTrainList();
					}
				}).catch(() => {
				
				})
			
			},
			
			...mapActions(["setPageParams"])
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lx-container {
		padding: 32px 24px;
		@include flex-column(flex-start, flex-start);

		
	}
</style>
